<script lang="ts">
  import { Canvas,  } from "@threlte/core"

  import Sphere from "./sphere.svelte"
  import Demomesh from "./mesh/demomesh.svelte"
  import Demogltf from "./gltf/demogltf.svelte"
  import Demoenvironment from "./environment/demoenvironment.svelte"
  import Demobase from "./base/demobase.svelte"
  import Demoline from "./line/demoline.svelte"
  import Demohtml from "./html/demohtml.svelte"
  import Demoshadows from "./shadows/demoshadows.svelte"
  import Demogrid from "./grid/demogrid.svelte"
    import Demopoints from "./points/demopoints.svelte"
</script>

<Canvas size={{ height:650,width:1200}}>
  <!-- <Layers layers={1}>
    <T.AxesHelper args={[15, 15, 15]} />
  </Layers> -->
  <Demobase />

  <!-- <Demoenvironment /> -->
  <Demomesh />

  <!-- <Demogltf /> -->
  <Demoline />

  <Demoshadows />
  <!-- 这个组件的元素 需要额外的定位设置 -->
  <!-- <Demohtml /> -->

  <!-- <Demogrid /> -->
<!-- <Demopoints /> -->
  <!-- <T.Mesh position={[1, 1, -1]} geometry={new SphereGeometry(0.5)} {material}>
    <HTML position={(0.6, 0.8, $htmlPosZ)} transform>
      <button
        on:pointerenter={() => (isHovering = true)}
        on:pointerleave={() => {
          isPointerDown = false
          isHovering = false
        }}
        on:pointerdown={() => (isPointerDown = true)}
        on:pointerup={() => (isPointerDown = false)}
        on:pointercancel={() => {
          isPointerDown = false
          isHovering = false
        }}
        on:click={onClick}
        class="bg-brand rounded-full px-3 text-white hover:opacity-90 active:opacity-70"
      >
        I'm a regular HTML button
      </button>
    </HTML>

    <HTML position={{ x: 0.75 }} transform pointerEvents="none">
      <p
        class="text-xs w-auto translate-x-1/2 drop-shadow-lg"
        style="color: #{material.color.getHexString()}"
      >
        color: #{material.color.getHexString()}
      </p>
    </HTML>
  </T.Mesh> -->
</Canvas>

<!-- <style>
  Canvas {
    position: fixed;
  }
</style> -->
